import {designPage} from "@peryl/react-compose";
import './user-info-page.scss';
import {Box, i18n, Icon, Tab, TabGroup} from "plain-design";
import {buildAssetsPath} from "../../common/buildAssetsPath";
import workspacePageLocale from "../statistic-panel/workspace-page.locale";
import {UserInfoArticle} from "./UserInfoArticle";
import {UserInfoApplication} from "./UserInfoApplication";

i18n.setLangs(workspacePageLocale);

export default designPage(() => {
  return () => (
    <div className="user-info-page">
      <div className="user-info-page-side">
        <div className="user-info-page-side-card">
          <div className="user-info-page-avatar">
            <Icon icon="pi-user"/>
          </div>
          <span className="user-info-page-name">{i18n.$intl("page.crmHome.userFullName").d('系统管理员')}</span>
          <span className="user-info-page-postn">{i18n.$intl('page.crmHome.userPosition').d('产品技术部前端工程师')}</span>
          <div className="user-info-page-information">
            <div>
              <Icon icon="pi-idcard"/>
              <span>{i18n.$intl('page.userInfoPage.idCard').d('前端研发技术专家')}</span>
            </div>
            <div>
              <Icon icon="pi-user-group"/>
              <span>{i18n.$intl('page.userInfoPage.userGroup').d('某某技术股份有限公司 / 某某事业部 / 某某技术部 / 技术专家')}</span>
            </div>
            <div>
              <Icon icon="pi-location"/>
              <span>{i18n.$intl('page.userInfoPage.location').d('某某省 / 某某市 / 某某区 / 某某园区')}</span>
            </div>
          </div>
        </div>
        <div className="user-info-page-side-card">
          <span className="user-info-page-side-card-title">{i18n.$intl('page.userInfoPage.tagTitle').d('标签')}</span>
          <div className="user-info-page-side-tag-list">
            {(i18n.$intl('page.userInfoPage.tags').d('') as any as string[]).map(item => (
              <div key={item}>{item}</div>
            ))}
            <div><Icon icon="pi-plus"/></div>
          </div>
        </div>
        <div className="user-info-page-side-card">
          <span className="user-info-page-side-card-title">{i18n.$intl('page.userInfoPage.teamTitle').d('团队')}</span>
          <div className="user-info-page-team-list">
            {(i18n.$intl('page.workspace.myTeamOptions').d('') as any as { title: string, avatar: string, desc: '' }[]).map(item => {
              return (
                <Box className="project-item padding" key={item.title}>
                  <img src={buildAssetsPath(item.avatar)}/>
                  <div>
                    <div>{item.title}</div>
                    <div>{item.desc}</div>
                  </div>
                </Box>
              );
            })}
          </div>
        </div>
      </div>
      <div className="user-info-page-content">
        <TabGroup>
          <Tab title={`${i18n.$intl('page.userInfoPage.articles').d('文章')}(18)`}>
            <Box className="px">
              <UserInfoArticle/>
            </Box>
          </Tab>
          <Tab title={`${i18n.$intl('page.userInfoPage.applications').d('应用')}(30)`}>
            <Box className="px py">
              <UserInfoApplication/>
            </Box>
          </Tab>
        </TabGroup>
      </div>
    </div>
  );
});
